<!--
 * @Author: 宋杰
 * @Date: 2020-12-25 20:19:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-12 15:09:24
 * @Description: 一家十一口(猜一字) 信用奖罚
-->
<template>
  <div class="divBox">
    <!-- 信用奖罚 -->
    <div class="qiehanbut">
      <el-button-group>
        <el-button
          class="butbox1"
          @click="is_plain = 1"
          :class="is_plain == 1 ? 'is_plain2' : 'is_plain1'"
          plain
          >信用奖励</el-button
        >
        <el-button
          plain
          @click="is_plain = 2"
          :class="is_plain == 2 ? 'is_plain2' : 'is_plain1'"
          >信用惩罚</el-button
        >
        <el-button
          class="butbox2"
          plain
          @click="is_plain = 3"
          :class="is_plain == 3 ? 'is_plain2' : 'is_plain1'"
          >投诉处理</el-button
        >
      </el-button-group>
    </div>

    <!-- 信用奖励 1-->
    <div v-show="is_plain == 1">
      <div class="div3">
        <div class="topBox3">
          <div class="topBox2 ">学员投诉处理一览</div>
          <div class="topBox3_sou">
            <!-- 日期 -->
            <div>
              <span>奖励日期: </span>
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <el-button type="primary" class="sousuoBox">
              <i class="el-icon-search"></i>
              <span>查找</span>
            </el-button>
          </div>
        </div>

        <div class="conBox3">
          <!-- con -->
          <div class="div4">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="serialNumber" label="序号">
              </el-table-column>
              <el-table-column prop="ApplicationDate" label="奖惩对象">
              </el-table-column>
              <el-table-column prop="type" label="项目名称"> </el-table-column>
              <el-table-column prop="organization" label="授课专家">
              </el-table-column>
              <el-table-column prop="ExperienceContent" label="奖励理由">
              </el-table-column>
              <el-table-column prop="ReviewOperation" label="奖励时间">
              </el-table-column>
              <!-- <el-table-column prop="ReviewResults" label="奖品">
              </el-table-column> -->
              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >查看详情</el-button
                  >
                  <!-- <el-button type="text" size="small">编辑</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- con end -->
        </div>
      </div>
    </div>
    <!-- 信用奖励 -->

    <!-- 信用惩罚 -->
    <div v-show="is_plain == 2">
      <div class="div3">
        <div class="topBox3">
          <div class="topBox2 ">学员投诉处理一览</div>
          <div class="topBox3_sou">
            <!-- 日期 -->
            <div>
              <span>惩罚日期: </span>
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <el-button type="primary" class="sousuoBox">
              <i class="el-icon-search"></i>
              <span>查找</span>
            </el-button>
          </div>
        </div>

        <div class="conBox3">
          <!-- con -->
          <div class="div4">
            <el-table :data="tableData2" stripe style="width: 100%">
              <el-table-column prop="serialNumber" label="序号">
              </el-table-column>
              <el-table-column prop="ApplicationDate" label="奖惩对象">
              </el-table-column>
              <el-table-column prop="type" label="项目名称"> </el-table-column>
              <el-table-column prop="organization" label="授课专家">
              </el-table-column>
              <el-table-column prop="ExperienceContent" label="惩罚理由">
              </el-table-column>
              <el-table-column prop="ReviewOperation" label="惩罚时间">
              </el-table-column>
              <el-table-column prop="ReviewOperation2" label="惩罚方案">
              </el-table-column>
              <el-table-column prop="ReviewOperation3" label="状态">
              </el-table-column>
              <!-- <el-table-column prop="ReviewResults" label="奖品">
              </el-table-column> -->
              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >申请修复</el-button
                  >
                  <!-- <el-button type="text" size="small">编辑</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- con end -->
        </div>
      </div>
    </div>
    <!-- 信用惩罚 end-->

    <!-- 投诉处理 3-->
    <div v-show="is_plain == 3">
      <div class="div3" v-if="PJshow == false">
        <div class="topBox3">
          <div class="topBox2 ">学员投诉处理一览</div>
          <div class="topBox3_sou">
            <!-- 日期 -->
            <div>
              <span>日期: </span>
              <el-date-picker
                v-model="value2"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <el-button type="primary" class="sousuoBox">
              <i class="el-icon-search"></i>
              <span>查找</span>
            </el-button>
          </div>
        </div>

        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in conBox3List"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox3_1">
              <span>{{ item.leixin2 }}</span>
            </div>
            <div class="conBox3_3">
              <div>{{ item.banji }}</div>
              <div>{{ item.name }}</div>
            </div>
            <div class="conBox3_2">
              <div>开设时间</div>
              <div>{{ item.time }}</div>
            </div>
            <div class="conBox3_2">
              <div style="color:#555">{{ item.leixin3 }}</div>
            </div>
            <!-- 详情 -->
            <el-button type="primary" plain size="mini" round
              >申请修复</el-button
            >
            <el-button
              type="primary"
              plain
              size="mini"
              @click="PJshow = !PJshow"
              round
              >差评详情</el-button
            >
          </div>
        </div>
      </div>
      <!-- 评价详情 -->
      <div class="div3" v-if="PJshow == true">
        <div class="conBox3">
          <div
            class="conBoxList"
            v-for="(item, index) in conBox3List"
            :key="index"
            :class="index % 2 == 0 ? 'biecolor1' : 'biecolor2'"
          >
            <div class="conBox3_2 conBox3_2_1">
              <span>{{ item.text }}</span>
            </div>
          </div>
          <!-- 返回 -->
          <div class="fanhuibut">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="PJshow = !PJshow"
              round
              >返回</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 投诉处理 end -->
    <!-- 机构经营项目一览 end -->
  </div>
</template>

<script>
// import basic from './login//basic'

export default {
  data() {
    return {
      is_plain: 1,
      // 机构项目信息一栏
      // 列表
      conBox3List: [
        {
          id: "0",
          fenshu: "60",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "周卓",
          time: "2020.3.3",
          leixin: "视频",
          leixin2: "学校",
          leixin3: "未修复",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "培训一班",
          text:
            "教师上课抽烟，辱骂学员"
        },
        {
          id: "1",
          fenshu: "60",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "亚中",
          time: "2020.3.3",
          leixin: "视频",
          leixin2: "学校",
          leixin3: "未修复",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "培训一班",
          text:
            "教师上课玩手机，打学生，不负责任"
        },
        {
          id: "2",
          fenshu: "60",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "邱从新",
          time: "2020.3.3",
          leixin: "视频",
          leixin2: "机构",
          leixin3: "未修复",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "培训一班",
          text:
            "教师上课玩手机，打学生，不负责任"
        },
        {
          id: "3",
          fenshu: "80",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "李凯",
          time: "2020.3.3",
          leixin: "视频",
          leixin2: "机构",
          leixin3: "未修复",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          shuxing: "开启",
          banji: "培训三班",
          text:
            "教师上课玩手机，打学生，不负责任"
        },
        {
          id: "4",
          fenshu: "90",
          jigou: "xxx培训,vxxx培训,xxx培训",
          name: "王刚",
          time: "2020.3.3",
          leixin: "视频",
          leixin2: "机构",
          leixin3: "已修复",
          renyuan: "李教授",
          kaikeshijian: "2020.4.5",
          shuxing: "暂停",
          banji: "培训二班",
          text:
            "教师上课玩手机，打学生，不负责任"
        }
      ],
      // 机构项目信息一栏 end

      // 日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value2: "",
      is_plain: 1, //切换
      PJshow: false, //显示评价详情页面
      // con 奖励
      tableData: [
        {
          serialNumber: "1",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "张远",
          ExperienceContent: "填补国内教育空白",
          ReviewOperation: "2020.10.20",
          ReviewResults: "2000"
        },
        {
          serialNumber: "2",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "王强",
          ExperienceContent: "填补国内教育空白",
          ReviewOperation: "2020.10.20",
          ReviewResults: "2000"
        },
        {
          serialNumber: "3",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "赵丽丽",
          ExperienceContent: "填补国内教育空白",
          ReviewOperation: "2020.10.20",
          ReviewResults: "2000"
        },
        {
          serialNumber: "4",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "赵一",
          ExperienceContent: "填补国内教育空白",
          ReviewOperation: "2020.10.20",
          ReviewResults: "2000"
        },
        
      ],
      // con end
      // con 惩罚
      tableData2: [
        {
          serialNumber: "1",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "赵伟",
          ExperienceContent: "教学事故",
          ReviewOperation: "2020.10.20",
          ReviewOperation2: "停课自查",
          ReviewOperation3: "未修复",
          ReviewResults: "2000"
        },
        {
          serialNumber: "2",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "宋党委",
          ExperienceContent: "教学事故",
          ReviewOperation: "2020.10.20",
          ReviewOperation2: "剥夺教学资格",
          ReviewOperation3: "已修复",
          ReviewResults: "2000"
        },
        {
          serialNumber: "3",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "张远",
          ExperienceContent: "教学事故",
          ReviewOperation: "2020.10.20",
          ReviewOperation2: "停课自查",
          ReviewOperation3: "未修复",
          ReviewResults: "2000"
        },
        {
          serialNumber: "4",
          ApplicationDate: "机构",
          type: "培训一班",
          organization: "王建",
          ExperienceContent: "教学事故",
          ReviewOperation: "2020.10.20",
          ReviewOperation2: "停课自查",
          ReviewOperation3: "未修复",
          ReviewResults: "2000"
        },
        
      ]
      // con end
    };
  },

  methods: {
  },

  mounted() {}
};
</script>
<style scoped>
.divBox {
  width: 100%;
  padding: 0 5% 10% 5%;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-top: 57px;
}

.div3 {
  background: #fff;
  width: 100%;
  /* min-width: 800px; */
  /* min-height: 220px; */
  border-radius: 4px;
  overflow: hidden;
  /* margin-bottom: 150px; */
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgb(223, 223, 223);
}

.conBoxList {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.biecolor1 {
  background: #f9f9f9;
}
.biecolor2 {
  background: #fff;
}
.conBoxList > div {
  flex: 1;
  text-align: center;
  /* margin-top: 0 !important;
  margin-bottom: 0 !important; */
}
.conBox3_3 {
  flex: 0.5 !important;
}
.conBox3_3 > :nth-child(1),
.conBox3_3 > :nth-child(2) {
  text-align: left;
}
/* 分数 */
.conBox3_1 {
  flex: none !important;
  width: 50px;
  height: 30px;
  border: 1px solid #409eff;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  padding: 0 10px;
  color: #409eff;
}
.orangecolor {
  border: 1px solid rgb(240, 147, 40) !important;
  color: rgb(240, 147, 40) !important;
}
.conBox3_2 > :nth-child(1) {
  color: rgb(153, 153, 153);
}
.conBox3_2_1 {
  text-align: left !important;
}
.conBox3_3 > :nth-child(2) {
  color: rgb(153, 153, 153);
}
.shanchuanbox {
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.shanchuanbox > :nth-child(1) {
  width: 90px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  /* line-height: 32px; */
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  position: absolute;
  right: 0;
  margin-right: 6%;
}
.topBox3_sou >>> .el-input {
  width: 160px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}

/* 切换按钮 */
.qiehanbut {
  width: 100%;
  /* min-width: 800px; */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qiehanbut >>> .el-button {
  border: none;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
}
.qiehanbut >>> .butbox1 {
  border-left: none;
}
.qiehanbut >>> .butbox2 {
  border-right: none;
}
.is_plain1 {
  color: #000 !important;
  background: #fff !important;
}
.is_plain2 {
  color: #fff !important;
  background: #409eff !important;
}
/* 返回 */
.fanhuibut {
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.topBox2 {
  padding: 0 10px;
  width: 30%;
  height: 49px;

  background: url(../../../static/img/h22-bg.png) no-repeat;
  /* border-bottom: 1px solid rgb(223, 223, 223); */
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 4%;
  margin-top: -1px;
  padding-left: 20px;
  padding-top: 5px;
}

/* 奖励 */
/* 内容 */
.div4 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
</style>
